<template>
  <div class="flow_ranking">
    <h2>品牌今日客流排行榜</h2>
    <div class="traffic">
      <ul>
        <li
          v-for="(item,i) in dataList"
          :key="i"
        >
          <span class="name">{{item.bi_value.name}}</span>
          <span class="bar"><i :style="'width:'+item.bi_value.value/maxValue*100+'%'"></i></span>
          <span class="num">{{item.bi_value.value}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "flowRanking",
  components: {},

  data() {
    return {
      dataList: [],
      maxValue: 0
    };
  },
  mounted() {
    this.getMaxFlowShop();
  },

  methods: {
    getMaxFlowShop() {
      //今日全场客流最大top20
      let andatongURL = this.$config.andatongurl;
      andatongURL = andatongURL + "/andatong/mall_stats";
      console.log("Get Max Flow Shop");
      //
      // 获取今日实时客流最大商铺
      // let nowstr = moment().format('YYYYMMDD');
      //
      var curYear = Number(moment().format("YYYY"));
      var curMonth = Number(moment().format("M"));
      var curDay = Number(moment().format("D"));

      let query = {
        // date: nowstr, mall_id: 'sh001', bi_name: 'rt_max_shop'
        dt_year: curYear,
        dt_month: curMonth, //当前月份
        dt_day: curDay,
        bi_name: "get_pingpai_20"
      };

      // 获取今日客流最大商铺
      console.log("andatongURL", andatongURL);
      this.$http.post(andatongURL, query).then(res => {
        this.dataList = res.data.data.slice(0, 9);
        this.maxValue = res.data.data[0].bi_value.value;

        //console.log("今日最大客流",   this.maxValue);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.flow_ranking {
  width: 400px;
  height: 280px;
  margin-top: 20px;
  float: left;
  margin-left: 40px;
  h2 {
    margin: 20px auto 0;
  }
  .traffic {
    width: 400px;
    height: 220px;
    position: relative;
    ul {
      padding-left: 0;
      li {
        width: 100%;
        display: flex;
        line-height: 24px;
        span {
          color: #9981e5;
          &.name {
            width: 34%;
            text-align: right;
          }
          &.bar {
            width: 60%;
            height: 9px;
            background: #151a27;
            margin: 8px 20px;
            position: relative;
            i {
              position: absolute;
              left: 0;
              top: 0;
              height: 9px;
              background: linear-gradient(
                90deg,
                rgba(64, 43, 126, 1) 0%,
                rgba(169, 136, 202, 1) 100%
              );
            }
          }
          &.num {
            width: 10%;
          }
        }
      }
    }
  }
}
</style>
